본문으로 건너뛰기

useRef

🧑🏻‍💻 useRef​

useRef : 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook이다.

const ref = useRef(initialValue)

  • initialValue는 ref 객체의 current 프로퍼티 초기 설정 값으로, 초기 렌더링 이후 부터는 무시되는 값이다.

  • ref는 각각의 컴포넌트에 로컬로 저장된다. (컴포넌트에 저장되는 것은 아니다.)

🧑🏻‍💻 알고 가기​

✅ useRef와 useState는 무엇이 다른가?​

useRefuseState
{ current: initialValue } 반환state 변수의 현재 값과 state 설정자 함수 반환
변경 시 리렌더링 촉발 X변경 시 리렌더링 촉발 O
MutableImmutable
렌더링 중에는 current 값을 읽거나 쓰지 않아야 함언제든지 state를 읽을 수 있음.

✅ useRef를 언제 사용해야 하는가?​

  • 시각적 출력에 영향을 미치지 않는 정보를 저장할 때

    → 리렌더링을 하지 않아서 메모리를 아낄 수 있고, 각각의 컴포넌트에 로컬로 저장되기 때문이다. 컴포넌트의 형상에 영향을 주지 않는 브라우저 API 등과 통신해야 할 때

  • ref로 DOM을 조작할 때

    → ref 객체의 current 프로퍼티를 DOM 노드로 설정할 수 있다. 즉 DOM 노드에 접근해 해당 노드에서 사용하는 메서드를 호출할 수 있다.

  • 컴포넌트의 형상에 영향을 주지 않는 브라우저 API 등과 통신해야 할 때

  • clearInterval 혹은 timeout ID 저장할 때

✅ ref.current 사용 시 참고하기​

  • ref.current 프로퍼티는 state와 달리 변이할 수 있다. (현재 렌더링 상태에서 값 변경 가능)

  • ref.current 프로퍼티를 변경해도 React는 컴포넌트를 다시 렌더링하지 않는다.

  • 렌더링 중에는 ref.current를 쓰거나 읽으면 안된다.

🧑🏻‍💻 활용 및 생각할 거리​

✅ 왜 처음에 초기 값(initailValue)으로 null 값을 배정하는가?​

  • Ref가 컴포넌트가 마운트되기 전에는 유효하지 않기 때문이다. null을 초기 값으로 설정하면 해당 Ref가 마운트된 후에 값이 할당되는 것을 명시적으로 나타낼 수 있다. 이는 잠재적인 버그를 피하고 코드를 안전하게 유지하는데 도움이 된다.